<script setup lang="ts">
const progressData = [
  {
    name: "杭州青青草公益服务中心 ",
    percentage: 99,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心 ",
    percentage: 95,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心 ",
    percentage: 90,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心 ",
    percentage: 85,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心 ",
    percentage: 80,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心 ",
    percentage: 75,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心 ",
    percentage: 74.5,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心 ",
    percentage: 74,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心 ",
    percentage: 73,
    duration: 110,
    color: "#007aff"
  },
  {
    name: "杭州青青草公益服务中心 ",
    percentage: 70,
    duration: 110,
    color: "#007aff"
  }
];
</script>

<template>
  <div v-for="(item, index) in progressData" :key="index">
    <div class="w-full text-[14px] mt-[8px]">{{ item.name }}</div>
    <div :class="['flex', 'justify-between']">
      <el-progress
        :text-inside="true"
        :percentage="item.percentage"
        :stroke-width="10"
        :color="item.color"
        striped
        striped-flow
        class="w-full"
        :show-text="false"
        :duration="item.duration"
      >
      </el-progress>
      <span
        class="cursor-pointer w-[50px] text-right block text-[13px] flex-none"
      >
        {{ item.percentage }}%
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
